<!--公告管理页-->
<template>
  <div style="height:6vh;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">公告管理</span>
    <el-button type="primary" @click="saveDialog"
               style="float:right;margin-top:10px;">新建公告</el-button>
  </div>
  
  <!-- 新建公告弹窗 -->
  <el-dialog
      :title="dialogTitle"
      v-model="dialogVisible"
      style="width: 1000px;padding: 60px;"
      :before-close="handleClose">

    <el-form label-position="top">
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="公告状态" style="width: 170px;">
            <el-select placeholder="请选择" v-model="saveAnnoFrom.status" >
              <el-option label="正常" value=10></el-option>
              <el-option label="停用" value=20></el-option>
            </el-select>
          </el-form-item>
        </el-col>
          <el-col :span="12">
            <el-form-item label="部门" style="width: 170px;">
              <el-select placeholder="请选择" v-model="saveAnnoFrom.deptId">
                <el-option label="财务部" value=101></el-option>
                <el-option label="技术部" value=102></el-option>
                <el-option label="研发部" value=103></el-option>
                <el-option label="客服部" value=104></el-option>
                <el-option label="法务部" value=105></el-option>
              </el-select>
            </el-form-item>
          </el-col>
      </el-row>
      
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="标题">
            <el-input placeholder="请输入标题" v-model="saveAnnoFrom.noticeTitle"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="公告内容">
            <el-input
                v-model="saveAnnoFrom.noticeContent"
                maxlength="500"
                autosize
                placeholder="请输入公告内容"
                show-word-limit
                type="textarea"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="公告备注">
            <el-input
                v-model="saveAnnoFrom.remark"
                maxlength="500"
                autosize
                placeholder="请输入公告备注"
                show-word-limit
                type="textarea"
            />
          </el-form-item>
        </el-col>
      </el-row>
      
    </el-form>
    
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary"
                 @click="saveAnno">确定</el-button>
    </template>
    
  </el-dialog>

  <!-- 查看公告详情弹窗 -->
  <el-dialog
      v-model="annoVisible"
      style="width: 1300px;padding: 20px;"
      :before-close="handleCloseB">
    <h2>{{annoDetail.noticeTitle}}</h2>
    <hr>
    <h4>
      <span>部门:&nbsp;<u>{{annoDetail.deptId}}</u></span>&nbsp;&nbsp;|&nbsp;&nbsp;
      <span>发布时间:&nbsp;{{annoDetail.createTime}}</span>
    </h4>
    <br>
    <el-text class="mx-1" size="large">{{annoDetail.noticeContent}}</el-text>
  </el-dialog>
  
  <!--搜索公告卡片-->
  <el-card style="margin: 20px 20px 0 20px;height: 140px">
    <el-form :inline="true">
      <el-form-item label="公告标题" style="width: 200px;">
        <el-input placeholder="请输入公告标题" v-model="searchAnno.noticeTitle"></el-input>
      </el-form-item>
      <el-form-item label="时间范围" style="width: 800px;">
        <el-date-picker
            v-model="searchAnno.startTime"
            type="date"
            placeholder="开始日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
        />
        &nbsp;至 &nbsp;
        <el-date-picker
            v-model="searchAnno.endTime"
            type="date"
            placeholder="结束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="部门ID" style="width: 200px;">
        <el-input placeholder="请输入ID" v-model="searchAnno.deptId"></el-input>
      </el-form-item>
      <el-form-item label="公告状态" style="width: 170px;">
        <el-select placeholder="请选择" v-model="searchAnno.status" >
          <el-option label="生效" value=10></el-option>
          <el-option label="停用" value=0></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadAnno">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <!-- 公告列表 -->
  <el-card style="margin:20px;">
    <el-table :data="annoList">
      <el-table-column type="index" label="编号" width="80" align="center"/>
      <el-table-column prop="noticeTitle" label="公告标题"  align="center"/>
      <el-table-column prop="deptId" label="所属部门"  align="center" :formatter="deptFormatter"/>
      <el-table-column prop="status" label="公告状态"  align="center" :formatter="noticeStatus"/>
      <el-table-column prop="createTime" label="创建时间" align="center"/>
      <el-table-column prop="updateTime" label="更新时间" align="center"/>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="showAnno(scope.row.id)">查看详情</el-button>
<!--          <el-button link type="primary" size="small" @click="editAccount(scope.row.id)">编辑公告</el-button>-->
          <el-button link type="primary" size="small" @click="deleteAnno(scope.row.id)">删除公告</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>
<script setup>
import {onMounted, ref} from "vue";
import qs from "qs";
import {ElMessage} from "element-plus";
import api from "@/util/request";

const dialogTitle = ref('新建公告');
const dialogVisible = ref(false);
const searchAnno = ref({});
const saveAnnoFrom = ref({});
const annoList = ref([]);

//网关
const gateway = '/system_api';


//重置搜索
const resetSearch = () => {
  searchAnno.value = {};
  loadAnno();
}

//加载公告列表
const loadAnno = ()=>{
  let data = qs.stringify(searchAnno.value);
  console.log(data)
  api.get(gateway+'/oa/notice/select?'+data).then((response)=>{
    if(response.data.code === 2000){
      annoList.value = response.data.data;

    }else {
      ElMessage.error(response.data.msg);
    }
  })
}

onMounted(()=>{
  loadAnno();
  console.log(annoList.value);
})

//查看公告详情
const annoVisible = ref(false);
const annoDetail = ref({});

const showAnno = (id) => {
  annoVisible.value = true;
  api.get(gateway+'/oa/notice/select?id=' + id).then((response) => {
    if (response.data.code === 2000) {
      annoDetail.value = response.data.data[0];
      console.log(annoDetail.value);
    } else {
      ElMessage.error(response.data.msg);
    }
  })
}

//删除公告
const deleteAnno = (id,userId) => {
  if(confirm('确定要删除本公告?')){
    api.post(gateway+'/oa/notice/delete/'+id).then((response)=>{
      if(response.data.code === 2000){
        ElMessage.success("删除成功")
        loadAnno();
      }else {
        ElMessage.error(response.data.msg);
      }
    })
  }
}

//新建公告弹窗
const saveDialog = () => {
  dialogVisible.value = true;
}

//新增公告
const saveAnno = () => {
  let data = qs.stringify(saveAnnoFrom.value);
  api.post(gateway+'/oa/notice/save?', data).then((response) => {
    if (response.data.code === 2000) {
      ElMessage.success("公告发布成功!");
      dialogVisible.value = false;
      saveAnnoFrom.value = {};
      searchAnno.value = {};
      loadAnno();
    } else {
      ElMessage.error(response.data.msg);
    }
  })
}

const handleClose = () => {
  if (confirm('确定要关闭本弹窗?')) {
    dialogVisible.value = false;
    saveAnnoFrom.value = {};
    loadAnno();
  }
}

const handleCloseB = () => {
  if (confirm('确定要关闭本公告?')) {
    annoVisible.value = false;
    saveAnnoFrom.value = {};
    loadAnno();
  }
}

//部门名称
const deptFormatter = (row,column,cellValue,index) => {
  if(cellValue == 101){
    cellValue = '财务部';
  }else if(cellValue == 102){
    cellValue = '技术部';
  }else if(cellValue == 103){
    cellValue = '研发部';
  }else if(cellValue == 104){
    cellValue = '客服部';
  }else if(cellValue == 105){
    cellValue = '法务部';
  }
  return cellValue;
}

//公告状态
const noticeStatus = (row,column,cellValue,index) => {
  if(cellValue == 0){
    cellValue = '已停用';
  }else if (cellValue == 10){
    cellValue = '生效';
  }
  return cellValue;
}

</script>

<style scoped>

</style>